<template>
  <div v-show="setView==='list'">
  <ContentWrapForm>
    <HeaderTitle :title="'专题图件产出管理'" :content="'专题图件模板管理，图件生成规则管理。'" :isdivider="false"/>
  </ContentWrapForm>
  <ContentWrapForm>
      <el-tabs v-model="tabName"   @tab-change="tabChange" tab-position="top" class="custom-tabs">
        <el-tab-pane v-for="component, name in tabsMap" :key="name" :name="name" :label="name">
        </el-tab-pane>
      </el-tabs>
        <component ref="listRef" :is="tabsMap[tabName]" :current-tab="tabName" @setViewFun="openForm"  />
    </ContentWrapForm>

</div>
<!-- 表单弹窗：添加/修改 -->
<ContentWrapForm v-show="setView ==='templateMangeadd'">
    <ConfigurationForm ref="templateMangeformRef"  @setClose="setClose" />
</ContentWrapForm>
<div v-show="setView==='ruleMangeadd'" style="margin: 0 10px;">
    <!-- 表单弹窗：添加/修改 -->
    <FilesReleaseForm ref="ruleMangeformRef"  @setClose="setClose" />
</div>
</template>
<script lang="ts" setup>
import { templateMange,ruleMange } from './index';
import ConfigurationForm from './templateMange/ConfigurationForm.vue';
import FilesReleaseForm from './ruleMange/FilesReleaseForm.vue';

const listRef = ref()
const templateMangeformRef = ref()
const ruleMangeformRef = ref()

const tabsMap = {
  '模版管理': templateMange,
  '规则管理': ruleMange,
}
const tabName = ref('模版管理')
const tabChange = ()=>{
  console.log(tabName.value)
}
console.log(tabName)


const setView = ref('list');
const setViewFun=(type:string)=>{
  setView.value=type;
}
const setClose=()=>{
  setView.value='list';
  listRef.value.getList();
}
const openForm = (data) => {
  //如果是新增，则清空id
  if(data.type=='create'){
    data.id=''
  }
  if(data.str =='templateMangeadd'){
    templateMangeformRef.value.open(data.type, data.id)
  }else{
    ruleMangeformRef.value.open(data.type, data.id)
  }
  setViewFun(data.str)
}
</script>
<style scoped lang="scss">
:deep(.custom-tabs) {
  /* 取消下划线 */
  .el-tabs__active-bar {
    display: none;
  }

  /* 可选：取消悬停时的下划线 */
  .el-tabs__nav-wrap::after {
    display: none;
  }
  .el-tabs__item{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 38px;
    border-radius: 32px;
    padding: 0px!important;
    margin-right: 8px;
    color: #666;
  }
  /* 设置选中标签页的颜色和背景色 */
  .el-tabs__item.is-active {
    color: #1664FF; /* 选中标签页的文字颜色 */
    background: rgba(53, 96, 246, 0.1); /* 选中标签页的背景颜色 */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 38px;
    border-radius: 32px;
    padding: 0px!important;
    margin-right: 8px;
  }
}
/* 使用::v-deep调整每一行的样式 */
::deep(.el-table) {
  .el-table__row {
    font-size: 16px;
    height: 40px;
    /* 设置每一行的高度 */
    line-height: 40px;
    /* 设置行内文本的垂直对齐 */
    color: #333333;
  }
}
.titleFont {
  display: inline-block;
  font-size: 16px;
  color: #333;
  font-weight: bold;
  margin-bottom: 15px;
}

:deep(.custom-header) {
  background-color: #F2F3F5 !important;
  /* 设置表头背景色 */
  color: #333 !important;
  /* 设置表头文字颜色 */
  font-weight: bold !important;
  /* 设置表头文字加粗 */
  height: 42px;
}
</style>